<template>
  <div class="upload_b">
    <div class="img-box" v-for="(img, index) in addform.fileList" :key="index">
      <div class="img-inner">
        <PublicImage :src="img.filePath"></PublicImage>
      </div>
      <span class="close-btn" @click.stop="delfiledata(img.id, img.fileName, index)"></span>
    </div>
    <div class="videoBox" v-if="upload.isUploading">
      <!--  -->
      <div v-loading="true" class="loadBox"></div>
    </div>
    <el-upload
      class="avatar-uploader"
       v-if="addform.fileList.length <9 && !upload.isUploading"
      multiple
      :on-error="handleError"
      :on-progress="handleFileUploadProgress"
      :headers="upload.headers"
      :action="upload.url"
      :show-file-list="false"
      :data="{ batchId: batchId, businessType: 'FINANCE' }"
      :on-success="handleFileSuccess"
      :before-upload="beforecheckfile"
      :limit="9"
      name="files"
      accept="image/*"
    >
      <!-- <div
        class="img-box"
        v-for="(img, index) in addform.fileList"
        :key="index"
      >
        <div class="img-inner">
          <img :src="img.filePath" class="banner" />
        </div>
        <span
          class="close-btn"
          @click.stop="delfiledata(img.id, img.fileName, index)"
        ></span>
      </div> -->
      <!-- <i class="el-icon-upload banner-uploader-icon">
        <span>上传</span>
      </i> -->
      <div class="banner-uploader-icon">
        <i class="el-icon-upload icon-img"></i>
        <div class="el-upload__text">上传</div>
      </div>
    </el-upload>
  </div>
</template>

<script>
import { getToken } from "@/utils/util.js";
import { host } from "@/utils/config.js";
import { request } from "@/utils/request.js";

export default {
  data() {
    return {
      addform: {
        fileList: [], //附件资料
        complaintfilelistvalidator: "",
        file: []
      },
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: getToken() },
        // 上传的地址
        url: host + "/system/file/upload"
      },
      batchId: "",
      addformrules: {},
      dialogVisible: false,
      dialogImageUrl: ""
    };
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //删除后
    removeFiles(response, fileList) {
      let data = fileList;
      this.addComloaintsFiles(data);
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.open = true;
      this.upload.isUploading = true;
    },
    handleError(){
      this.$message.error("上传失败");
      this.upload.isUploading = false;
      this.upload.open = false;
    },
    //上传附件前限制大小 格式
    beforecheckfile(file) {
      console.log(2679, file);
      this.upload.open = true;
      this.upload.isUploading = true;
      let isfile = true;
      const isLt10M = file.size / 1024 / 1024 < 30;
      if (!isfile) {
        this.$message.error("上传文件格式不正确");
      } else if (!isLt10M) {
        isfile = false;
        this.$message.error("上传文件大小不能超过 30MB");
      }
      this.upload.open = false;
      this.upload.isUploading = false;
      return isfile;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      if (response.code == 200) {
        this.addform.file = response.data;
        this.batchId = response.data;
        this.getFileDataList(response.data);
        this.addComloaintsFiles(fileList);
      } else {
        this.$alert(response.msg, "上传文件", {});
      }
    },
    //诉求新增文件
    addComloaintsFiles(fileList) {
      if (fileList.length > 0) {
        this.addform.complaintfilelistvalidator = "yes";
      } else {
        this.addform.complaintfilelistvalidator = "";
      }
    },
    //删除文件
    async delfiledata(id, name, idx) {
      let api = `${host}/system/file/${id}`;
      let res = await request(this, api, {}, "delete");
      if (res.code == 200) {
        this.$message({
          message: "删除" + name + "成功",
          type: "success"
        });
        this.getFileDataList(this.batchId);
        this.$emit("deleteImgUp")
      } else {
        this.$message.error(res.msg);
      }
    },
    //获取附件列表
    async getFileDataList(id) {
      let data = {
        batchId: id
      };
      let api = `${host}/system/file/list`;
      let res = await request(this, api, data, "GET");
      console.log(6666, res);
      if (res.code == 200) {
        res.rows.length =  res.rows.length >=9 ? 9 : res.rows.length //限制只有最多9张图
        this.addform.fileList = res.rows;
        this.$emit("changeImgUp", this.addform.fileList);
      } else {
        this.$message.error(res.msg);
      }
    }
  }
};
</script>

<style scoped>
.upload_b{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.videoBox {
  display: inline-block;
  width: 100px;
  min-height: 100px;
  margin-right: 14px;
  margin-bottom: 14px;
}
.videoBox .loadBox {
    width: 100px;
    height: 100px;
    background-color: #f1f2f4;
  }
.avatar-uploader {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.img-box {
  position: relative;
  height: 100px;
  width: 100px;
  float: left;
  border-radius: 4px;
  margin-right: 14px;
  margin-bottom: 14px;
}
.img-inner {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #f5f5f5;
}
.img-inner .banner {
  width: 100px;
  border-radius: 4px;
}
.close-btn {
  position: absolute;
  right: -7px;
  top: -9px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background: url("../../../assets/image/finance/close-img.png") no-repeat center;
}
.banner-uploader-icon {
  display: inline-block;
  font-size: 12px;
  color: #045db9;
  width: 100px;
  height: 100px;
  /* line-height: 100px; */
  text-align: center;
  border: 1px dashed #f1f2f4;
  background: #f1f2f4;
  border-radius: 2px;
  vertical-align: top;
}
.banner-uploader-icon .icon-img {
  font-size: 26px;
  margin-top: 20px;
}
.banner-uploader-icon .el-upload__text {
  line-height: 5px;
  font-size: 14px;
}
</style>
